<template>
    <div>
        <el-tabs tab-position="left" v-model="activeName" v-loading="loading">
            <el-tab-pane :label="$i18n.t('LOAN_INFO')" name="default">
                <form-content v-show="!loading" :data="data.loan_info" :column-num="2"></form-content>
                <el-card style="margin-top: 20px;">
                    <div slot="header" class="clearfix">
                        <span>{{ $i18n.t('APPROVE_RECORD') }}</span>
                    </div>
                    <el-table border style="width: 100%;" :data="data.approve_record">
                        <el-table-column align="center" prop="status" :label="$i18n.t('APPROVE_RESULT')"></el-table-column>
                        <el-table-column align="center" prop="approver" :label="$i18n.t('APPROVE_STAFF')"></el-table-column>
                        <el-table-column align="center" prop="record_time" :label="$i18n.t('APPROVE_TIME')"></el-table-column>
                        <el-table-column align="center" prop="remark" :label="$i18n.t('REMARK')"></el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>
            <el-tab-pane :label="$i18n.t('CUSTOMER_BASIC_INFO')" name="detail">
                <form-content v-show="!loading" :data="data.customer_basic" :column-num="1"></form-content>
            </el-tab-pane>
            <el-tab-pane :label="$i18n.t('CUSTOMER_DETAIL_INFO')" name="photo">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>{{ $i18n.t('CUSTOMER_FILLED_INFO') }}</span>
                    </div>
                    <form-content v-show="!loading" :data="data.filled_info" :column-num="2"></form-content>
                </el-card>
                <el-card style="margin-top: 20px;">
                    <div slot="header" class="clearfix">
                        <span>{{ $i18n.t('CUSTOMER_DEVICE_INFO') }}</span>
                    </div>
                    <form-content v-show="!loading" :data="data.device_info" :column-num="2"></form-content>
                </el-card>
                <el-card style="margin-top: 20px;">
                    <div slot="header" class="clearfix">
                        <span>{{ $i18n.t('CUSTOMER_CREDIT_INFO') }}</span>
                    </div>
                    <form-content v-show="!loading" :data="data.credit_info" :column-num="3"></form-content>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import FormContent from '@/components/FormContent'
    import { getOrderDetail } from '@/api/order'

    export default {
        name: 'OrderDetail',
        components: {
            FormContent
        },
        watch: {
            id (newVal, oldVal) {
                this.loading = true
                getOrderDetail(this.$route.query.id).then(res => {
                    const { result } = res
                    this.data = result
                }).finally(() => {
                    this.loading = false
                })
            }
        },
        data () {
            return {
                id: null,
                activeName: 'default',
                data: {
                    approve_record: [],
                    loan_info: [],
                    customer_basic: [],
                    filled_info: [],
                    device_info: [],
                    credit_info: []
                },
                isShowPictures: false,
                loading: true
            }
        },
        activated () {
            this.id = this.$route.query.id
        },
        created () {
            this.id = this.$route.query.id
        }
    }
</script>

<style scoped>

</style>
